<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.attr()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/attributes/">DOM 属性</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/manipulation/">DOM 操作</a> &gt; <a href="/category/manipulation/general-attributes/">通用属性操作</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/attr/" target="_blank">.attr()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
			    获取匹配的元素集合中的第一个元素的属性的值
			 或
			设置每一个匹配元素的一个或多个属性。
			    <div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#attr1">.attr( attributeName )</a><ul><li>.attr( attributeName )</li></ul>
</li>
<li>
<a href="#attr2">.attr( attributeName, value )</a><ul>
<li>.attr( attributeName, value )</li>
<li>.attr( attributes )</li>
<li>.attr( attributeName, function(index, attr) )</li>
</ul>
</li>
</ul>
</div><article class="entry method" id="attr1"><h2 class="section-title">
<span class="name">.attr( attributeName )</span><span class="returns">返回: <a href="/Types/#String">String</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>获取匹配的元素集合中的第一个元素的属性的值。</p>
<ul class="signatures"><li class="signature" id="attr-attributeName">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName )</h4>
<ul><li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要获取的属性名称</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.attr()</code>方法只获取<em>第一个</em>匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 <code>.each()</code>或者<code>.map()</code>方法循环。</p>
<p>使用 jQuery的 <code>.attr()</code> 方法得到了一个元素的属性值主要有两个好处：</p>
<ol>
<li>
<strong>方便</strong>：它可以直接被jQuery对象访问并且链式调用其他jQuery方法。</li>
<li>
<strong>浏览器兼容</strong>：一些属性在不同浏览器中得到不同的值。 甚至在同一个浏览器的不同版本中。 <code>.attr()</code> 方法减少了兼容性问题。 </li>
</ol>
<div class="warning">
<p><strong>注意:</strong> 除少数属性意外，属性值都是字符串，如value和tabindex。</p>
</div>
<div class="warning">
<p><strong>注意:</strong> 
			        试图改变通过HTML创建的，或已经在HTML文档中的<code>input</code>元素的<code>type</code>特性（attribute）或属性（property），在Internet Explorer 6, 7, or 8下将会抛出一个错误。</p>
</div>
<p>
<strong>在jQuery 1.6中</strong>,当属性没有被设置时候，<code>.attr()</code>方法将返回<code>undefined</code>。<del>另外，<code>.attr()</code>不应该用在普通的对象，数组，窗口（window）或文件（document）上。</del><strong>若要检索和更改DOM属性,比如元素的<code>checked</code>, <code>selected</code>, 或 <code>disabled</code>状态，请使用<a href="/prop">.prop()</a>方法。</strong></p>
<h4>Attributes vs. Properties</h4>
<p><em>attributes</em>和<em>properties</em>之间的差异在特定情况下是很重要。<strong>jQuery 1.6之前</strong> ，<a href="/attr"><code>.attr()</code></a>方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。<strong>从 jQuery 1.6 开始</strong>， <code>.prop()</code>方法 方法返回 property 的值,而 <code>.attr()</code> 方法返回 attributes 的值。</p>
<p>例如, <code>selectedIndex</code>, <code>tagName</code>, <code>nodeName</code>, <code>nodeType</code>, <code>ownerDocument</code>, <code>defaultChecked</code>, 和 <code>defaultSelected</code> 应使用<code>.prop()</code>方法进行取值或赋值。 在jQuery1.6之前，这些属性使用<code>.attr()</code>方法取得，但是这并不是元素的<code>attr</code>属性。他们没有相应的属性（attributes），只有特性(property)。</p>
<p>例如，考虑一个DOM元素的HTML标记中定义的<code>&lt;input type="checkbox" checked="checked" /&gt;</code> ，并假设它是一个JavaScript变量命名的<code>elem</code> ：</p>
<table class="listing">
<tbody><tr>
<th>
<code>elem.checked</code>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>$(elem).prop("checked")</code>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>elem.getAttribute("checked")</code>
</th>
<td>
<code>"checked"</code> (String) 复选框的初始状态;不会改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(1.6)</em>
</th>
<td>
<code>"checked"</code> (String) 复选框的初始状态;不会改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(1.6.1+)</em>
</th>
<td>
<code>"checked"</code> (String) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(pre-1.6)</em>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
</tbody></table>
<p>
			根据<a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C的表单规范</a> ，在<code>checked</code>属性是一个<a href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2"><em>布尔属性</em></a>，
			这意味着,如果这个属性（attribute）是目前存在，
			即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。
			这才是真正的所有布尔属性（attributes）。
			
			</p>
<p>
			然而，要记住的最重要的概念是<code>checked</code>特性（attribute）不是对应它<code>checked</code>属性（property）。特性（attribute）实际对应的是<code>defaultChecked</code>属性（property），而且仅用于设置复选框最初的值。<code>checked</code>特性（attribute）值不会因为复选框的状态而改变，而<code>checked</code>属性（property）会因为复选框的状态而改变。因此，
			 跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）：</p>
<ul>
<li>
<code>if ( elem.checked )</code>
</li>
<li>
<code>if ( $(elem).prop("checked") )</code>
</li>
<li>
<code>if ( $(elem).is(":checked") )</code>
</li>
</ul>
<p>
			      对于其他的动态属性，同样是true，比如 <code>selected</code> 和 <code>value</code>.</p>
</div>
<h3>Additional Notes（其他注意事项）:</h3>
<div class="longdesc"><ul>
<li>在Internet Explorer 9之前的版本，使用<a href="/prop"><code>.prop()</code></a>设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 <a href="/removeProp"><code>.removeProp()</code></a> 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 <a href="/data"><code>.data()</code></a> 方法 。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">在页面的第一个&lt;em&gt;中找到title属性。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">em</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  Once there was a <span class="tag">&lt;<span class="title">em</span> <span class="attribute">title</span>=<span class="value">"huge, gigantic"</span>&gt;</span>large<span class="tag">&lt;/<span class="title">em</span>&gt;</span> dinosaur...</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  The title of the emphasis is:<span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> title = $(<span class="string">"em"</span>).attr(<span class="string">"title"</span>);</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"div"</span>).text(title);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article><article class="entry method" id="attr2"><h2 class="section-title">
<span class="name">.attr( attributeName, value )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>设置每一个匹配元素的一个或多个属性。</p>
<ul class="signatures">
<li class="signature" id="attr-attributeName-value">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName, value )</h4>
<ul>
<li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置值的属性名</div>
</li>
<li>
<div><strong>value</strong></div>
<div>类型: <a href="/Types/#String,Number">String,Number</a>
</div>
<div>这个属性设置的值</div>
</li>
</ul>
</li>
<li class="signature" id="attr-attributes">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributes )</h4>
<ul><li>
<div><strong>attributes</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个 属性 - 值 集合对象。（译者注：例如{
			  alt: '',
			  title: 'WEB前端开发-http://www.css88.com
			}）</div>
</li></ul>
</li>
<li class="signature" id="attr-attributeName-functionindex--attr">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.1/">1.1</a></span>.attr( attributeName, function(index, attr) )</h4>
<ul>
<li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置值的属性名.</div>
</li>
<li>
<div><strong>function(index, attr)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			
			  这个函数返回用来设置的值，<code>this</code>指向当前的元素。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<p>这个 <code>.attr()</code> 方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">id</span>=<span class="value">"greatphoto"</span> <span class="attribute">src</span>=<span class="value">"brush-seller.jpg"</span> <span class="attribute">alt</span>=<span class="value">"brush seller"</span> /&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="setting-simple-attr">Setting a simple attribute(设置一个简单的属性)</h4>
<p>我们可以通过<code>.attr()</code>方法非常简单的改变 <code>alt</code> 属性并附上新值：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr(<span class="string">'alt'</span>, <span class="string">'Beijing Brush Seller'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>我们可以用同样的方法 <em>添加</em> 一个属性：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>)</code></div></div><div class="container"><div class="line"><code>.attr(<span class="string">'title'</span>, <span class="string">'Photo by Kelly Clark'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="setting-several-attrs">Setting several attributes at once(一次设置多个属性)</h4>
<p>同时改变<code>alt</code> 属性 和 添加  <code>title</code>属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value  对象将增加或者修改一个属性：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr({</code></div></div><div class="container"><div class="line"><code>  alt: <span class="string">'Beijing Brush Seller'</span>,</code></div></div><div class="container"><div class="line"><code>  title: <span class="string">'photo by Kelly Clark'</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>当设置多个属性,包裹属性名的引号是可选的。</p>
<p><strong>警告：</strong> 当设置样式名（“class”）属性时，必须使用引号！</p>
<p><strong>注意</strong>: jQuery禁止改变一个 <code>&lt;input&gt;</code> 或 <code>&lt;button&gt;</code>元素的<code>type</code> 特性（attribute），并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<code>&lt;input&gt;</code>或者<code>&lt;button&gt;</code>元素的<code>type</code>属性。 </p>
<h4 id="computed-attr-values">Computed attribute values(推算属性值)</h4>
<p>通过使用一个函数来设置属性， 可以根据该元素上的其它属性值返回最终所需的属性值。例如，我们可以把新的值与现有的值联系在一起：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr(<span class="string">'title'</span>, <span class="keyword">function</span>(i, val) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> val + <span class="string">' - photo by Kelly Clark'</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
			      当前运用一个函数来计算属性的值，当我们修改了多个元素的属性，特别有用。</p>
<p><strong>注意 </strong>如果setter函数没有返回任何数据（例如：<code>function(index, attr){})</code>，属性的当前值返回值是undefined，作为一个getter行为。实际上，如果不进行任何更改的setter函数不返回的东西。</p>
</div>
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4>Example: <span class="desc">为页面中全部的 &lt;img&gt;设置一些属性。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">24</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;<span class="title">B</span>&gt;</span>Attribute of Ajax<span class="tag">&lt;/<span class="title">B</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"img"</span>).attr({</code></div></div><div class="container"><div class="line"><code>  src: <span class="string">"images/hat.gif"</span>,</code></div></div><div class="container"><div class="line"><code>  title: <span class="string">"jQuery"</span>,</code></div></div><div class="container"><div class="line"><code>  alt: <span class="string">"jQuery Logo"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).text($(<span class="string">"img"</span>).attr(<span class="string">"alt"</span>));</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1-1">
<h4>Example: <span class="desc">使第二个后面的按钮disabled</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">b</span> <span class="rules">{ <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bolder;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>        <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span>Zero-th <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span>First <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span>Second <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).attr(<span class="string">"id"</span>, <span class="function"><span class="keyword">function</span> <span class="params">(arr)</span> {</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> <span class="string">"div-id"</span> + arr;</code></div></div><div class="container"><div class="line"><code>})</code></div></div><div class="container"><div class="line"><code>.each(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"span"</span>, <span class="keyword">this</span>).html(<span class="string">"(ID = '&lt;b&gt;"</span> + <span class="keyword">this</span>.id + <span class="string">"&lt;/b&gt;')"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1-2">
<h4>Example: <span class="desc"> 通过图片的title属性设置SRC属性。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">title</span>=<span class="value">"hat.gif"</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"img"</span>).attr(<span class="string">"src"</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> <span class="string">"images/"</span> + <span class="keyword">this</span>.title;</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>